<html>
<head>
  <title></title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script>
  <script src="//cdn.jsdelivr.net/sockjs/1.0.0/sockjs.min.js"></script>
  <script src="//cdn.rawgit.com/vert-x3/vertx-bus-bower/master/vertx-eventbus.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/smoothie/1.27.0/smoothie.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<style>
    /** send box **/
    #sendBox{
        display:inline-block;
        position:relative;
    }

    #sendButton{
        position:absolute;
        bottom:10px;
        right:10px;
    }

    @keyframes pulse-slow {
        0%{transform:scale(1)}
        50%{transform:scale(1.4)}
        100%{transform:scale(1)}
    }

    /** animate-heartbeat **/
    @keyframes pulse {
        0% {
            transform: scaleX(1) scaleY(1);
        }
        10% {
            transform: scaleX(0.85) scaleY(0.85);
        }
        20% {
            transform: scaleX(1) scaleY(1);
        }
        30% {
            transform: scaleX(0.85) scaleY(0.85);
        }
        40% {
            transform: scaleX(1) scaleY(1);
        }
        50% {
            transform: scaleX(0.85) scaleY(0.85);
        }
        60% {
            transform: scaleX(1) scaleY(1);
        }
        70% {
            transform: scaleX(0.85) scaleY(0.85);
        }
        80% {
            transform: scaleX(1) scaleY(1);
        }
        90% {
            transform: scaleX(0.85) scaleY(0.85);
        }
        100% {
            transform: scaleX(1) scaleY(1);
        }
    }
    .animate-heartbeat {
        animation: pulse-slow 2s infinite;
    }

    .fa-stack-text {
        font-size: 2rem ;
    }

</style>

<body>
<div>
<div id="sendBox">
    <textarea id="sendMessage" cols="25" rows="12">
{
    "id": "sumo",
    "hr": 90
}
    </textarea>
    <button id="sendButton">Submit</button>
</div>
<canvas id="mycanvas" width="800" height="180"></canvas>


<span style="margin-left: 2cm; vertical-align:baseline;" class="fa-stack fa-4x">
  <i id="heart" class="fa fa-heart fa-stack-2x"></i>
  <i id="hr" class="fa-stack-1x fa-stack-text fa-inverse"></i>
</span>
</div>

<script>

  var eb = null;
  var timer = null;
  var hrElement;
  var heartElement;
  var timeSeries;

  function setupSmootie() {
      timeSeries = new TimeSeries();
      var smoothieChart = new SmoothieChart({
          minValue: 50.0,
          maxValue: 150.0,
          grid: {
              strokeStyle: 'rgb(125, 0, 0)',
              fillStyle: 'rgb(60, 0, 0)',
              lineWidth: 1,
              millisPerLine: 1000,
              verticalSections: 4
          }
      });
      smoothieChart.addTimeSeries(timeSeries, {
          strokeStyle:'rgb(0, 255, 0)',
          fillStyle:'rgba(0, 255, 0, 0.4)',
          lineWidth:3
      });
      smoothieChart.streamTo(document.getElementById("mycanvas"), 250);
  }

  function publish(address,  message) {
      var headers = {sensor: "hr"};
      eb.publish(address, message, headers);
  }

  function subscribe(address) {
      eb.registerHandler(address, function(msg, replyTo) {
          console.log(msg.text);
      });
  }

  function subscribeToHeartrate() {
      eb.registerHandler('iot.out.sumo.hr', function(err, res) {
          var hr = parseInt(res.body.hr);
          hrElement.html(hr);

          if(!heartElement.hasClass("animate-heartbeat")) {
              console.info('adding animate...');
              heartElement.addClass("animate-heartbeat");
          }

          //reset timer.
          clearTimeout(timer);
          timer = setTimeout(function() {
              console.log('removing animate...');
              heartElement.removeClass("animate-heartbeat");
          }, 3000);



          if (hr > 120) {
              heartElement.css({
                  color: "#d63230"
              });
          } else if (hr > 100) {
              heartElement.css({
                  color: "#ff4136"
              });
          } else if(hr > 80){
              heartElement.css({
                  color: "#ff6f69"
              });
          } else {
              heartElement.css({
                  color: "#008000"
              } );
          }

          timeSeries.append(new Date().getTime(), hr);
      });
  }


  function subscribeToActivity() {
      eb.registerHandler('iot.out.sumo.activity.inactive', function(err, res) {
          console.log("iot.out.sumo.activity.inactive: ", res.body)
      });
      eb.registerHandler('iot.out.sumo.activity.restored', function(err, res) {
          console.log("iot.out.sumo.activity.restored: ", res.body)
      });
  }

  $(document).ready(function() {
      hrElement = $("#hr"); //document.getElementById("hr");
      heartElement = $("#heart");

      setupSmootie();
      //eb = new EventBus('http://apsrt1451:5555/eventbus');
      eb = new EventBus('http://localhost:5555/eventbus');

      eb.onopen = function () {
          subscribeToHeartrate();
          subscribeToActivity();
      };

      $("#sendButton").click(function() {
          var msg = $("textarea#sendMessage").val();
          publish("iot.in.hr", JSON.parse(msg));
      });
  });

</script>

</body>
</html>
